<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>投票列表</title>
	<link rel="stylesheet" type="text/css" href="../../css/style.css?v=1.0">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
	<style>
		/* 分页样式 */
		.pagination {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px;
			gap: 5px; /* 添加间距 */
		}

		/* 分页按钮样式 */
		.pagination button {
			padding: 5px 10px;
			border: none;
			background-color: #f0f0f0;
			border-radius: 3px;
			cursor: pointer;
			transition: background-color 0.3s;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* 图标样式 */
		.pagination button i {
			font-size: 14px;
		}

		/* 鼠标悬停时按钮颜色变化 */
		.pagination button:hover {
			background-color: #ddd;
		}

		/* 当前页高亮 */
		.pagination .active {
			background-color: #555;
			color: white;
			font-weight: bold;
		}

		/* 禁用状态下的按钮样式 */
		.pagination .disabled {
			color: #ccc;
			cursor: not-allowed;
			background-color: #e0e0e0;
		}

		/* 每页显示下拉框样式 */
		.page-size {
			margin-right: 10px;
		}

		/* 下拉框样式 */
		.page-size select {
			padding: 5px;
			border: 1px solid #ccc;
			border-radius: 3px;
		}
	</style>
</head>
<body>
<jsp:include page="top.jsp" />
<script src="${pageContext.servletContext.contextPath}/webjars/jquery/3.4.1/jquery.js"></script>
<script>
	$(function () {
		function goToPage(pageindex) {
			var pageSize = $("#cbopagesize").val();
			location.href = "manage?pageSize=" + pageSize + "&pageindex=" + pageindex;
		}
		$("#pagenum").on('input', function() {
			var pageindex = $(this).val();
			var maxPage = parseInt(${subjectPage.pages});
			if (!isNaN(pageindex) && parseInt(pageindex) > 0 && parseInt(pageindex) <= maxPage) {
				goToPage(pageindex);
			}else {
				$(this).val(${subjectPage.current});
			}
		});
		$("#cbopagesize").change(function () {
			goToPage(1);
		});
		$("button[name=btnpages]").click(function (){
			let current = parseInt(${subjectPage.current});
			let pageindex = 1;
			switch ($(this).attr("tag")) {
				case "first":
					pageindex = 1;
					break;
				case "prve":
					pageindex = current - 1;
					break;
				case "next":
					pageindex = current + 1;
					break;
				case "last":
					pageindex = parseInt(${subjectPage.pages});
					break;
			}
			goToPage(pageindex);
		});
	});
</script>
<div id="vote" class="wrap">
	<h2>投票列表</h2>
	<ul class="list">
		<c:forEach var="it" items="${subjectPage.records}" varStatus="status">
			<li <c:if test="${status.index%2==0}">class="odd"</c:if>>
				<h4>
					<a href="/selectAllSubject?vsid=${it.vsId}">${it.vsTitle}</a>
				</h4>
				<c:set var="voId" value="" />
				<c:set var="isitem" value="false"></c:set>
				<c:forEach var="voteitem" items="${it.voteItems}">
					<c:if test="${fn:length(it.voteItems) !=null}">
						<c:set var="isitem" value="true"></c:set>
					</c:if>
				</c:forEach>
				<c:if test="${!isitem}">
				<div class="joins"><a href="/update?vsId=${it.vsId}">维护</a></div>
				</c:if>
				<p class="info">共有 ${fn:length(it.voteOptions)} 个选项，已有 ${fn:length(it.voteItems)} 个网友参与了投票。</p>
			</li>
		</c:forEach>
	</ul>
</div>
<div class="pagination">
	<span class="page-size">每页显示：</span>
	<select id="cbopagesize">
		<option value="2" <c:if test="${pageSize==2}">selected</c:if>>2条</option>
		<option value="5" <c:if test="${pageSize==5}">selected</c:if>>5条</option>
		<option value="10" <c:if test="${pageSize==10}">selected</c:if>>10条</option>
		<option value="20" <c:if test="${pageSize==20}">selected</c:if>>20条</option>
	</select>
	<button class="page-item" name="btnpages" tag="first" <c:if test="${!(subjectPage.current>1)}"> disabled </c:if> >首页</button>
	<button class="page-item" name="btnpages" tag="prve" <c:if test="${!(subjectPage.current>1)}"> disabled </c:if> >上一页</button>
	<input type="number" value="${subjectPage.current}" id="pagenum" style="width: 40px">
	<span class="page-item">第 <span id="current-page">${subjectPage.current}</span> 页</span>
	<span class="page-item">共 <span id="total-pages">${subjectPage.pages}</span> 页</span>
	<button class="page-item" name="btnpages" tag="next" <c:if test="${!(subjectPage.current<subjectPage.pages)}"> disabled </c:if> >下一页</button>
	<button class="page-item" name="btnpages" tag="last" <c:if test="${!(subjectPage.current<subjectPage.pages)}"> disabled </c:if> >尾页</button>
</div>
<div id="footer" class="wrap">
	北大青鸟 &copy; 版权所有
</div>
</body>
</html>